// 搜索下拉
$choosed = $(".choosed");
$choosed.on("click", function () {
    $(".choicebox").css({
        display: "block"      
    });     
    return false;
})
$choicebox = $(".choicebox");
var choosed = document.querySelector(".choosed");
$(".choices").on("click",function(evt){
    var e = evt ||event;
    var target = e.target || e.srcElement;
    // console.log(target);
    choosed.innerHTML = target.innerHTML +"<i class='fa fa-caret-down'></i>";
    
    // console.log(choosed);
    $choicebox.css({
        display:"none"
    })
})

// banner
var slide_index = 0;
        // 获取元素
        // 上一个元素
        var button_prev_ele = document.querySelector(".button-prev")
        // 下一个元素
        var button_next_ele = document.querySelector(".button-next");
        // 所有图片
        var slides = document.querySelectorAll(".slide");
        // 图片数量
        var slide_count = slides.length;
        console.log(slide_count);
        // 声明一个变量存贮图片跳转的上一张图片的下标
        var slide_prev = 0;//初始值设为0
        // 进行事件绑定*****
        // 下一个点击事件
        button_next_ele.onclick = function () {
            // 声明一个变量出处上一个的下标
            slide_prev = slide_index;

            // 图片是一定数量的所以进行判断
            // 下标的变化
            if (slide_index === slide_count - 1) {
                slide_index = 0;
            } else {
                slide_index++;
            }
            slide_animate();
        }
        // 上一个点击事件
        button_prev_ele.onclick = function () {
            // 存储上一个图片下标            
            slide_prev = slide_index;

            // 下标的变化 
            if (slide_index === 0) {
                slide_index = slide_count - 1;
            } else {
                slide_index--;
            }
            slide_animate();
        }
        var pagination_ele = document.querySelector(".pagination");

        function pagination() {
            var html = "";
            // 数量应该等于图片数量
            for (var i = 0; i < slide_count; i++) {
                // 根据slide_index,初始创建一个含有active类名的i
                if (i === slide_index) {
                    html += "<i class='active'></i>"
                } else {
                    html += "<i></i>"
                }
            }
            // 把拼接好的字符放入容器中
            pagination_ele.innerHTML = html;
            // 对动态生产的分页器，进行事件委托
            // addEventListener(事件类型,事件处理函数) :事件监听
            // mouseover : 鼠标滑过
            pagination_ele.addEventListener("mouseover", function (evt) {
                var e = evt || event;
                var target = e.target || e.srcElement;

                // 进行判定,同时确保，存在active的元素不重复执行
                if (target.nodeName === "I" && target.className !== "active") {
                    // 获取到容器的所有子集元素
                    var pagination_list = pagination_ele.children;
                    // 把伪数组变为真数组
                    pagination_list = [].slice.call(pagination_list);
                    // 获取当前元素的下标
                    var index = pagination_list.indexOf(target);

                    // 同时完成相应的动画效果（图片切换）
                    // 记录上一个图片下标
                    slide_prev = slide_index;
                    // 存储现在下标
                    slide_index = index;
                    // 执行动画封装函数
                    slide_animate();
                }
            })
        }
        pagination();
        function slide_animate() {
            var pagination_list = pagination_ele.children;
            // 把对于下标的图片显示出来
            // 1.清空所有元素的slide-active 类名
            // 2.清空所有元素的slide-prev 类名
            for (var i = 0; i < slide_count; i++) {
                slides[i].className = slides[i].className.replace(/\s?slide(\-active|\-prev)/g, "");
                // active类名 清空
                pagination_list[i].className = "";
            }
            // 2.给要显示的添加上slide-active 类名
            slides[slide_index].className += " slide-active";
            // 给上一个图片添加slide-prev 类名
            slides[slide_prev].className += " slide-prev";
            // 把图片对应的i添加active类名
            pagination_list[slide_index].className = "active";
            // 不同的动画效果
            var animate_list = [
                {
                    attr: "opacity",
                    target: 1
                },
                {
                    attr: "height",
                    target: 470
                },
                {
                    attr: "width",
                    target: 590
                }
            ]
            // 添加动画效果
            // 0 ~ 1的透明度运动,当前元素的透明度已经是1了!;
            // 选取数组中的类型
            var animate_data = animate_list[0];
            // 设置元素的初始值
            slides[slide_index].style[animate_data.attr] = 0;
            // 给封装的定时器，传入数据
            animate(slides[slide_index], animate_data.target, animate_data.attr)
        }
        var t = setInterval(function () {
            slide_prev = slide_index;
            if (slide_index === slide_count - 1) {
                slide_index = 0
            } else {
                slide_index++;
            }
            slide_animate();
        }, 3000)
        
        var container_ele = document.querySelector(".container")
        container_ele.onmouseenter = function () {
            clearInterval(t);
        }
        container_ele.onmouseleave = function () {
            t = setInterval(function () {
                //自动执行下一个点击事件
                button_next_ele.onclick()
            }, 3000)
        }
        // 定时器封装函数
        function animate(ele, target, attr) {
            // 1.之前定时器关闭
            clearInterval(ele.t);

            // 2元素初始值获取
            var attr_value = getComputedStyle(ele)[attr];

            // 3.元素处理
            // 因为速度会进行取整，所以输入小数的操作进行放大如：透明度 opacity
            var iNow = attr === "opacity" ? parseInt(attr_value * 100) : parseInt(attr_value);
            // * target 在相同情况下也要改变
            target = attr === "opacity" ? target * 100 : target;

            // 定时器设置
            ele.t = setInterval(function () {
                // 4.速度计算 目标值 -初始值
                var speed = (target - iNow) / 10;

                // 速度取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                // 5.元素的变化值
                iNow = iNow + speed;

                // 6.元素的运动
                ele.style[attr] = attr === "opacity" ? iNow / 100 : iNow + "px";

                // 7.终止条件判定
                if (iNow === target) {
                    clearInterval(ele.t);
                }

            }, 50)
        }

//  吸顶菜单
var $header = $("#header");

$(window).scroll(function(){
    var scrollTop = $("html,bady").scrollTop();
    if(scrollTop > 80){
        $header.addClass("header_anm");
        $(".header-content2").css({
            display:"block",
            top:-8
        })
        $(".CarShop").css({
            display:"none"
        })
        $(".nav").css({
            top:50
        })
        $(".header-bottom").css({
            top:0,
            backgroundColor:"#fff"          
        })
        $(".header-bottom a").css({
            color:"#000"
        })
    }else{
        $header.removeClass("header_anm");
        $(".header-content2").css({
            display:"none",
            
        })
        $(".CarShop").css({
            display:"block"
        })
        $(".nav").css({
            top:80
        })
        $(".header-bottom").css({
            top:80,
            backgroundColor:"#1f1f1f"          
        })
        $(".header-bottom a").css({
            color:"#fff"
        })
    }
})
$(window).trigger("scroll");

// 回到顶部 
var $hddb = $(".hddb");
$hddb.on("click",function(){  
    $('html,body').animate({
        scrollTop: '0'
    }, 10); 
    return false; 
})

// 倒计时
$(function() {
    show_time();
});
function show_time() {
    var time_start = new Date().getTime(); //设定当前时间
    var time_end = new Date("2021/1/1 00:00:00").getTime(); //设定目标时间
    // 计算时间差
    var time_distance = time_end - time_start;
    // 天
    var int_day = Math.floor(time_distance / 86400000)
    time_distance -= int_day * 86400000;
    // 时
    var int_hour = Math.floor(time_distance / 3600000)
    time_distance -= int_hour * 3600000;
    // 分
    var int_minute = Math.floor(time_distance / 60000)
    time_distance -= int_minute * 60000;
    // 秒
    var int_second = Math.floor(time_distance / 1000)
    // 时分秒为单数时、前面加零
    if (int_day < 10) {
        int_day = "0" + int_day;
    }
    if (int_hour < 10) {
        int_hour = "0" + int_hour;
    }
    if (int_minute < 10) {
        int_minute = "0" + int_minute;
    }
    if (int_second < 10) {
        int_second = "0" + int_second;
    }
    // 显示时间
    $("#day").html(int_day);
    $("#hours").html(int_hour);
    $("#minutes").html(int_minute);
    $("#seconds").html(int_second);
    // 设置定时器
    setTimeout("show_time()", 1000);
}

// 艺术服务部分
var $mS_li=$(".menuServer li");
var msli_index = null;
for(var i=0;i<$mS_li.length;i++){
    
       $($mS_li[i]).on("click",function(index){
           for(var i=0;i<$mS_li.length;i++){
            $($mS_li[i]).removeClass("on")
           }
          console.log(index,$mS_li[index]);
          $($mS_li[index]).addClass("on")
          mSxuanran(index);
       }.bind(this,i))
}
// 艺术服务部分的渲染
function mSxuanran(index){
    $.getJSON("../json/index.json",function(data){

        console.log(data[index]);
        var h2=data[index][1].h2;
        console.log(h2);
        $(".CText>h2").html(data[index][0].h2)
        $(".CText>p").html(data[index][0].p)

        var msli_html="<i></i>"
        for(var i=0;i<data[index].length;i++){
            msli_html+=`<span>${data[index][i].name} 
            <b>${data[index][i].b1}<br>
            ${data[index][i].b2}</b></span>
        `
        }
        $(".YSprogramme").html(msli_html);
    })
}



